<template>
  <div>
    <!--<div class="address">
        <div>
            <p>您当前所在位置</p>
            <router-link to="/" class="link">团体个订详细</router-link>
        </div>
    </div>-->
    <div class="roder-details">
      <div class="info">
        <h3 class="title">定制成衣尺寸</h3>
        <h4 class="title2">成衣尺寸</h4>
        <div class="list">
          <div class="list-div">
            <div>
              <p>产品名称</p>
              <span>{{ proName.productName }}</span>
            </div>

            <!--            <div v-for="(item,key) in sizelist" :key="item.id">
                          <p>{{ item.bodySizename }}</p>
                          <span>{{ item.bodysizeValue }}{{ item.unit }}</span>
                        </div>-->

            <div v-if="proName.standardSize == ''" v-for="(item,key) in sizelist" :key="item.id">
              <p>{{ item.bodySizename }}</p>
              <span
                v-show="item.bodysizeValue!=null && item.bodysizeValue != ' ' && item.bodysizeValue!='null' && item.bodysizeValue!=''">{{
                  item.bodysizeValue
                }}{{ item.unit }}</span>
            </div>

            <div v-if="proName.standardSize != ''">
              <p>标准尺码</p>
              <span>{{ proName.standardSize }}</span>
            </div>
          </div>
        </div>

        <div v-if="proName.liangtiRemark!=null">
          <h3 class="title">量体备注</h3>
          <div>
            <p>{{ proName.liangtiRemark }}</p>
          </div>
        </div>

        <h3 class="title">量体图片</h3>
        <el-image
          v-for="(item,index) of proName.imgs" :key="index"
          style="width: 100px; height: 100px"
          :src="item"
          fit="fit"></el-image>

        <!--<div class="list">
            <div class="list-div">
                <div>
                    <p>
                        品类</p>
                    <span>裤子</span>
                </div>
                <div>

                </div>
                <div>

                </div>

                <div>
                    <p>左外长</p>
                    <span>79cm</span>
                </div>
                <div>
                    <p>右外长</p>
                    <span>79cm</span>
                </div>
                <div>
                    <p>中档</p>
                    <span>79cm</span>
                </div>
                <div>
                    <p>内长</p>
                    <span>79cm</span>
                </div>
                <div>
                    <p>腰围</p>
                    <span>79cm</span>
                </div>
                <div>
                    <p>全浪</p>
                    <span>79cm</span>
                </div>
                <div>
                    <p>臀围</p>
                    <span>79cm</span>
                </div>
                <div>
                    <p>横档</p>
                    <span>79cm</span>
                </div>
                <div>
                    <p>脚口</p>
                    <span>79cm</span>
                </div>

            </div>
        </div>-->

        <!--<h4 class="title2">体型数据</h4>
        <div class="list">
            <div class="list-div">
                <div>
                    <p>
                        胸部</p>
                    <span>标准</span>
                </div>
                <div>
                    <p>
                        臀部</p>
                    <span>标准</span>
                </div>
                <div>
                    <p>
                        站姿</p>
                    <span>标准</span>
                </div>

                <div>
                    <p>
                        背部</p>
                    <span>标准</span>
                </div>
                <div>
                    <p>
                        肩部</p>
                    <span>溜肩</span>
                </div>
                <div>
                    <p>
                        腹部</p>
                    <span>凸肚</span>
                </div>

            </div>
        </div>-->


        <div class="btns" style="justify-content: flex-start;">
          <!--<a class="b1" style="width:90px;margin-top: 20px;margin-right: 20px;">导出</a>-->
          <a class="b3" @click="$router.go(-1)" style="width:90px;margin-top: 20px;">返回</a>
        </div>

      </div>
    </div>

  </div>
</template>

<script>


// @ is an alias to /src
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import {getAction} from "../../api/manage";

export default {
  name: 'MyAfterSales',
  data() {
    return {
      locale,
      sizelist: [], // 尺寸列表
      proName: {}, // 产品信息
      url: {
        size: '/teamOrder/listSmallSize',//当前个人量体尺寸
        getProName: '/teamOrder/getProName' //当前产品名称
      }
    }
  },
  created() {
    this.getSize()
    this.getName()
  },
  methods: {
    // 获取量体尺寸
    getSize() {
      getAction(this.url.size, {
        'proID': this.$route.query.proID,
        'orderSn': this.$route.query.orderSn
      }).then(res => {
        if (res.code == 0) {
          this.sizelist = res.data
        }
      })
    },

    // 获得当前小产品的品类名称
    getName() {
      getAction(this.url.getProName, {
        'proID': this.$route.query.proID,
      }).then(res => {
        if (res.code == 0) {
          this.proName = res.data
        }
      })
    },

    selectTab: function (dataStr, i) {
      this[dataStr] = i
    }
  },
  mounted() {
    // 切换页面时滚动条自动滚动到顶部
    window.scrollTo(0, 0);
  }
}
</script>

<style scoped lang="less">
.roder-details {
  width: 80%;
  margin: 0 auto;
  background: #fff;
  margin-top: 20px;
  padding: 20px 35px;


  .btns {
    display: flex;
    justify-content: space-between;
    height: 36px;
    align-items: center;
    margin-bottom: 50px;

    div {
      display: flex;
    }

    a.b1 {
      background-color: #393939;
      width: 122px;
      height: 36px;
      color: rgb(255, 238, 58);
      font-size: 15px;
      line-height: 36px;
      text-align: center;
      display: block;
      border-radius: 3px;
    }

    a.b2 {
      background-color: #393939;
      width: 90px;
      height: 36px;
      color: #fff;
      font-size: 15px;
      line-height: 36px;
      text-align: center;
      display: block;
    }

    a.b3 {
      background-color: rgba(242, 242, 242, 1);
      width: 90px;
      height: 36px;
      color: #444;
      font-size: 15px;
      line-height: 36px;
      text-align: center;
      display: block;
    }
  }

  .info {
    padding-top: 30px;

    .inputs {
      div {
        display: flex;
        margin-bottom: 10px;

        p {
          width: 112px;
          padding: 2px 2px 2px 24px;
          background-color: rgba(249, 249, 249, 1);
          font-size: 15px;
          color: #333;
          display: flex;
          height: 36px;
          align-items: center;
          margin: 0px !important;
        }

        span {
          width: 114px;
          padding: 2px 2px 2px 24px;
          background-color: rgba(255, 255, 255, 1);
          font-size: 15px;
          color: #333;
          display: flex;
          font-weight: 100;
          height: 36px;
          align-items: center;
          margin-left: 3px;
          border-width: 1px;
          border-style: solid;
          cursor: pointer;
          border-color: rgba(242, 242, 242, 1);

          &:hover {
            font-weight: 600;
            color: #fff;
            background-color: rgba(159, 159, 159, 1);
          }
        }

        b {
          width: 61px;
          cursor: pointer;
          text-align: center;
          background-color: rgba(249, 249, 249, 1);
          font-size: 15px;
          color: #333;
          display: flex;
          font-weight: 100;
          height: 36px;
          align-items: center;
          justify-content: center;

          &:hover {
            font-weight: 600;
            color: #fff;
            background-color: rgba(159, 159, 159, 1);
          }
        }
      }
    }

    .img12 {
      border-width: 1px;
      border-style: solid;
      border-color: rgba(242, 242, 242, 1);
      width: 193px;
      min-width: 193px;
      margin-right: 30px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;

      & > p:nth-child(2) {
        background-color: #4d4d4d;
        color: rgb(255, 236, 112);
        line-height: 16px;
        font-size: 13px;
        padding: 5px 13px;
        margin-bottom: 6px;
      }

      & > p:nth-child(3) {
        background-color: #4d4d4d;
        color: rgb(255, 236, 112);
        line-height: 16px;
        font-size: 13px;
        padding: 5px 10px;
      }

      img {
        width: 153px;
        height: 158px;
        position: relative;
        top: -10px;
      }
    }

    .table-css {
      position: relative;

      .bz {
        width: 447px;
        height: 63px;
        background: inherit;
        background-color: rgba(255, 221, 202, 1);
        position: absolute;
        right: 0px;
        top: -63px;
        display: flex;
        align-items: center;
        justify-content: center;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;

        p {
          width: 100%;
          color: rgb(251, 8, 8);
          font-size: 13px;
          padding-left: 10px;
          margin-bottom: 0px;
          line-height: 16px;
        }
      }
    }

    .btn {

      border-width: 0px;
      width: 112px;
      height: 40px;
      background: inherit;
      background-color: rgba(13, 221, 108, 1);
      border: none;
      border-radius: 3px;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
      font-weight: 500;
      font-style: normal;
      font-size: 15px;
      text-align: center;
      display: block;
      color: #fff;
      line-height: 40px;
      margin-top: 25px;
      margin-bottom: 60px;
      cursor: pointer;
    }

    .price {
      color: rgb(38, 38, 38);
      font-size: 16px;
      padding: 2px 2px 2px 24px;
      font-weight: 700;

      span {
        color: rgb(215, 1, 1);
      }

      margin: 35px 0px;
    }

    .price1 {
      color: rgb(38, 38, 38);
      font-size: 16px;
      font-weight: 400;
      padding: 2px 2px 2px 24px;

      span {
        color: rgb(215, 1, 1);
      }

      margin: 35px 0px;
    }

    .text1 {
      width: 533px;
      height: 105px;
      padding: 3px 2px 3px 2px;
      font-family: 'ArialMT', 'Arial';
      font-weight: 400;
      font-style: normal;
      font-size: 13px;
      text-decoration: none;
      letter-spacing: normal;
      color: #000000;
      vertical-align: none;
      text-align: left;
      text-transform: none;
      background-color: #f9f9f9;
      border-color: transparent;
      resize: none;
      outline: none;
      padding: 10px;
    }

    .tabs {
      .tab {
        margin-bottom: 10px;
        display: flex;

        h5 {
          width: 112px;
          padding: 2px 2px 2px 24px;
          background-color: rgba(249, 249, 249, 1);
          font-size: 15px;
          color: #333;
          display: flex;
          height: 36px;
          align-items: center;
          margin: 0px !important;
          margin-right: 6px !important;
        }

        .tab-content {
          height: 36px;
          display: flex;

          p {
            border: 1px solid rgb(242, 242, 242);
            min-width: 100px;
            height: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 15px;
            color: #333;
            font-size: 15px;
            margin-right: 6px;

            cursor: pointer;

            b {
              display: none;
              font-weight: 700;
            }

            &.active {
              color: rgb(255, 236, 112);
              font-weight: 700;
              background-color: rgb(74, 74, 74);
            }

            &:hover {
              b {
                display: block;
              }

              span {
                display: none;
              }
            }
          }
        }
      }
    }

    h3.title {
      height: 30px;
      line-height: 30px;
      position: relative;
      font-size: 16px;
      color: #333;
      font-weight: 700;
      margin-bottom: 25px;

      &:after {
        position: absolute;
        height: 100%;
        width: 5px;
        position: absolute;
        left: -35px;
        top: 0px;
        background-color: rgba(74, 74, 74, 1);
        content: "";
      }
    }

    .title2 {
      width: 112px;
      padding: 2px 2px 2px 24px;
      font-size: 15px;
      color: #333;
      display: flex;
      height: 36px;
      align-items: center;
      margin: 0px !important;
      margin-bottom: 10px !important;
      font-weight: 700;
    }

    .list {
      margin-bottom: 20px;

      .list-div {
        display: flex;
        flex-wrap: wrap;

        div {
          width: 33.3%;
          display: flex;
          height: 36px;
          align-items: center;

          p {
            width: 112px;
            padding: 2px 2px 2px 24px;
            background-color: rgba(249, 249, 249, 1);
            font-size: 15px;
            color: #333;
            display: flex;
            height: 36px;
            align-items: center;
            margin: 0px !important;
          }

          span {
            width: calc(100% - 112px);
            padding: 2px 2px 2px 24px;
            font-size: 15px;
            color: #333;
            display: flex;
            height: 36px;
            align-items: center;

            &.b {
              font-weight: 700;
            }
          }
        }
      }
    }
  }
}
</style>
